<template>
    <div>
        <div style=""></div>
        <div style="width: 55%;margin-left: 250px">
            <el-carousel :interval="5000" arrow="always">
                <el-carousel-item v-for="item in imgs" :key="item">
                    <img style="height: 300px;width: 100%" :src="item"/>
                </el-carousel-item>
            </el-carousel>

        </div>
        <div style="display: flex">
            <div class="EchartPractice">
                <div id="main"></div>
            </div>
            <div id="pie1">
                <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                <div id="main1" style="width:500px;height: 350px;margin-left: 0px"></div>
            </div>
            <div id="line" style="width: 410px;height: 400px;margin-top: 0px"></div>

        </div>

    </div>
</template>

<script>
    export default {
        name: 'Dashboard',
        data() {
            return {
                imgs: [
                    'http://img63.ddimg.cn/cuxiao/lxiangguo675x240.jpg',
                    'http://img61.ddimg.cn/cuxiao/675-240beisahng.jpg',
                    'https://easyreadfs.nosdn.127.net/fe_cms/file.cf0f84dd74afe23743f843d0799aa181.jpg',
                    'https://easyreadfs.nosdn.127.net/fe_cms/file.312d3fdbe1073431d827030cce52f9b4.jpg',
                    'https://edu-yuedu.bdimg.com/v1/RD/5years/720-285-%E5%A6%82%E6%9E%9C-1554368471664.jpg',
                ]
            }
        },
        methods: {
            drawLineChart() {
                let myEcharts = this.$echarts.init(document.getElementById("line"));
                let option = {
                    title: {
                        text: "折线图例"
                    },
                    tooltip: {},
                    legend: {
                        data: ["销量"]
                    },
                    xAxis: {
                        data: ["苹果", "香蕉", "橘子", "葡萄","芒果"]
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: "line",
                        data: [50, 20, 45, 30,55]
                    }]
                };
                myEcharts.setOption(option);
            },
            drawChart() {
                let myEchart = this.$echarts.init(document.getElementById("main"));
                let option = {
                    title: {
                        text: "图例"
                    },
                    tooltip: {},
                    legend: {
                        data: ["销量"]
                    },
                    xAxis: {
                        data: ["苹果", "香蕉", "橘子", "葡萄",]
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: "bar",
                        data: [50, 60, 45, 30,]
                    }]
                };
                myEchart.setOption(option);
            },
            initData() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("main1"));
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: '某站点用户访问来源',//主标题

                    },
                    tooltip: {
                        trigger: 'item',

                    },
                    legend: {
                        orient: 'vertical',
                        bottom: 'bottom',
                        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [
                                {value: 335, name: '直接访问'},
                                {value: 310, name: '邮件营销'},
                                {value: 234, name: '联盟广告'},
                                {value: 135, name: '视频广告'},
                                {value: 1548, name: '搜索引擎'}
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                });
            },

        },
        mounted() {
            this.drawChart();
            this.initData()
            this.drawLineChart()
        }


    }
</script>


<style>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    #main {
        width: 400px;
        height: 400px;

        margin-top: 10px
    }

    .line-wrap {
        width: 200px;
        height: 400px;
    }
</style>

<!--
<template>
    <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="item in imgs" :key="item">
            <img :src="item"/>
        </el-carousel-item>
    </el-carousel>
</template>


<script>
    export default {
        name:'Dashboard',
        data(){
            return{
                imgs:[
                    'https://img0.kfzimg.com/operation/08/84/0884c26391a2b2a8a3c6fc1817f160c7.jpg',
                    'https://img0.kfzimg.com/operation/22/ae/22aed844e44c06fe0e5bede1e949bd5a.jpg'
                ]
            }
        }
    }
</script>

<style>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
</style>
-->
